@import variable

.#{$view360-prefix}-controls
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  padding: 0
  margin: 0
  border: 0
  pointer-events: none
  user-select: none
  -webkit-user-drag: none
  z-index: 1
.#{$view360-prefix}-main
  &.#{$view360-prefix}-vr-presenting
    .#{$view360-prefix}-controls
      display: none

.#{$view360-prefix}-controls-float-left,
.#{$view360-prefix}-controls-float-right
  position: absolute
  display: flex
  flex-direction: column

.#{$view360-prefix}-controls-float-left
  left: 0px
  top: 0px

.#{$view360-prefix}-controls-float-right
  right: 0px
  top: 0px

.#{$view360-prefix}-controls-main
  position: absolute
  bottom: 0
  left: 0
  width: 100%
  opacity: 1
  transition: none
  &.#{$view360-prefix}-controls-hidden
    opacity: 0
    transition: opacity 500ms
    *
      pointer-events: none
  &.#{$view360-prefix}-controls-fixed
    opacity: 1

.#{$view360-prefix}-controls-background
  width: 100%
  height: calc(100% + 32px)
  position: absolute
  left: 0
  bottom: 0
  background-image: linear-gradient(0deg, rgba(50, 50, 50, 1), rgba(50, 50, 50, 0))
  &.#{$view360-prefix}-controls-hidden
    display: none

.#{$view360-prefix}-controls-mid
  display: flex
  flex-direction: row
  position: relative

.#{$view360-prefix}-controls-left
  display: flex
  flex: 1
  justify-content: flex-start
  align-items: center
  flex-direction: row

.#{$view360-prefix}-controls-right
  display: flex
  align-items: center
  flex-direction: row

.#{$view360-prefix}-controls-bottom
  display: flex
  align-items: center
  flex-direction: row

.#{$view360-prefix}-controls-button
  display: inline-block
  background-color: transparent
  cursor: pointer
  border: 0
  position: relative
  background-size: 24px 24px
  background-origin: content-box
  background-repeat: no-repeat
  box-sizing: border-box
  pointer-events: all
  border-radius: 20px
  transition: opacity 250ms
  width: 40px
  height: 40px
  margin: 6px
  padding: 8px
  opacity: 0.8
  &:hover
    opacity: 1
  &.#{$view360-prefix}-controls-vr
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48' viewBox='0 0 100 100'%3E%3Cg%3E%3Cpath d='M5,30 L95,30 L95,80 L55,80 L50,70 L45,80 L5,80 L5,30' fill='transparent' stroke='%23fff' stroke-width='8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M5,30 L15,10 L85,10 L95,30' fill='transparent' stroke='%23fff' stroke-width='8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='30' cy='55' r='10' stroke='%23fff' stroke-width='8' fill='transparent' /%3E%3Ccircle cx='70' cy='55' r='10' stroke='%23fff' stroke-width='8' fill='transparent' /%3E%3C/g%3E%3C/svg%3E")
  /*
   * Following background-image svgs are from tabler icons
   * https://github.com/tabler/tabler-icons
   *
   * tabler icons is licensed under the MIT license
   * https://github.com/tabler/tabler-icons/blob/master/LICENSE
   */
  &.#{$view360-prefix}-controls-play
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 4v16l13 -8z'%3E%3C/path%3E%3C/svg%3E")
  &.#{$view360-prefix}-controls-pause
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Crect x='6' y='5' width='4' height='14' rx='1'%3E%3C/rect%3E%3Crect x='14' y='5' width='4' height='14' rx='1'%3E%3C/rect%3E%3C/svg%3E")
  &.#{$view360-prefix}-controls-unmuted
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M15 8a5 5 0 0 1 0 8'%3E%3C/path%3E%3Cpath d='M17.7 5a9 9 0 0 1 0 14'%3E%3C/path%3E%3Cpath d='M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5'%3E%3C/path%3E%3C/svg%3E")
  &.#{$view360-prefix}-controls-muted
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5'%3E%3C/path%3E%3Cpath d='M16 10l4 4m0 -4l-4 4'%3E%3C/path%3E%3C/svg%3E")
  &.#{$view360-prefix}-controls-fullscreen
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M4 8v-2a2 2 0 0 1 2 -2h2'%3E%3C/path%3E%3Cpath d='M4 16v2a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cpath d='M16 20h2a2 2 0 0 0 2 -2v-2'%3E%3C/path%3E%3C/svg%3E")
  &.#{$view360-prefix}-controls-fullscreen-exit
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M15 19v-2a2 2 0 0 1 2 -2h2'%3E%3C/path%3E%3Cpath d='M15 5v2a2 2 0 0 0 2 2h2'%3E%3C/path%3E%3Cpath d='M5 15h2a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cpath d='M5 9h2a2 2 0 0 0 2 -2v-2'%3E%3C/path%3E%3C/svg%3E")
  /*
   * Following background-image svgs are from Google Material Icons
   * https://fonts.google.com/icons
   *
   * Material Design Icons is licensed under the Apache License 2.0
   * https://github.com/google/material-design-icons/blob/master/LICENSE
   */
  &.#{$view360-prefix}-controls-gyro-enabled
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath fill='%23fff' d='M22.5 7.6v2.95q-1 .15-1.975.475-.975.325-1.875.825L16.5 9.7q1.35-.9 2.875-1.4 1.525-.5 3.125-.7Zm15.35 15.35q-.2 1.6-.7 3.125-.5 1.525-1.4 2.875L33.6 26.8q.5-.9.825-1.875.325-.975.475-1.975Zm3.8 20.45L1.3 3.05 3.45.9 43.8 41.25ZM7 41.4q-1.25 0-2.125-.875T4 38.4v-8.6h3v8.6h8.6v3ZM41 13V4.4h-8.6v-3H41q1.25 0 2.125.875T44 4.4V13ZM4 13V4.4q0-.55.2-1.1t.6-1l2.1 2.1V13Zm28.4 28.4v-3h8.5l2.1 2.1q-.4.45-.925.675-.525.225-1.075.225Zm-21.2-37-3-3h7.4v3ZM44 37.2l-3-3v-4.4h3ZM10.15 22.95h2.95q.5 3.7 3.1 6.3 2.6 2.6 6.3 3.1v2.95q-4.9-.55-8.35-4-3.45-3.45-4-8.35Zm4-11.35 2.1 2.05q-1.3 1.3-2.1 2.9-.8 1.6-1.05 3.4h-2.95q.25-2.4 1.275-4.525Q12.45 13.3 14.15 11.6ZM31.8 29.2l2.05 2.1q-1.7 1.7-3.825 2.725Q27.9 35.05 25.5 35.3v-2.95q1.8-.25 3.4-1.05 1.6-.8 2.9-2.1ZM25.5 7.6q4.9.55 8.35 4 3.45 3.45 4 8.35H34.9q-.5-3.7-3.1-6.3-2.6-2.6-6.3-3.1Z'/%3E%3C/svg%3E")
  &.#{$view360-prefix}-controls-gyro-disabled
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath fill='%23fff' d='M7 44q-1.2 0-2.1-.9Q4 42.2 4 41v-8.6h3V41h8.6v3ZM4 15.6V7q0-1.2.9-2.1Q5.8 4 7 4h8.6v3H7v8.6Zm18.5 22.25q-4.9-.55-8.35-4-3.45-3.45-4-8.35h2.95q.5 3.7 3.125 6.3 2.625 2.6 6.275 3.1ZM10.15 22.5q.55-4.9 4-8.35 3.45-3.45 8.35-4v2.95q-3.7.5-6.3 3.1-2.6 2.6-3.1 6.3Zm13.85 5q-1.45 0-2.475-1.025Q20.5 25.45 20.5 24q0-1.45 1.025-2.475Q22.55 20.5 24 20.5q1.45 0 2.475 1.025Q27.5 22.55 27.5 24q0 1.45-1.025 2.475Q25.45 27.5 24 27.5Zm1.5 10.35V34.9q3.7-.5 6.3-3.125 2.6-2.625 3.1-6.275h2.95q-.55 4.9-4 8.35-3.45 3.45-8.35 4Zm9.4-15.35q-.5-3.7-3.1-6.3-2.6-2.6-6.3-3.1v-2.95q4.9.55 8.35 4 3.45 3.45 4 8.35ZM32.4 44v-3H41v-8.6h3V41q0 1.2-.9 2.1-.9.9-2.1.9ZM41 15.6V7h-8.6V4H41q1.2 0 2.1.9.9.9.9 2.1v8.6Z'/%3E%3C/svg%3E")

.#{$view360-prefix}-controls-time
  display: inline-block
  vertical-align: top
  white-space: nowrap
  color: white
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
  font-weight: normal
  font-size: 14px
  z-index: 1
  &:first-child
    padding: 0 16px

.#{$view360-prefix}-controls-progress
  flex: 1
  width: 100%
  padding: 0 16px
  box-sizing: border-box
  &:not(:first-child)
    padding-left: 0
.#{$view360-prefix}-controls-bottom
  .#{$view360-prefix}-controls-progress
    padding-bottom: 20px

.#{$view360-prefix}-controls-volume
  display: inline-flex
  flex-direction: row
  align-items: center
  transition: width 250ms, background-color 250ms
  overflow: hidden
  &:not(:disabled)
    &:hover,
    &.#{$view360-prefix}-controls-fixed
      width: 112px
  .#{$view360-prefix}-range
    flex: 1
    height: 100%
    padding: 0
    .#{$view360-prefix}-range-track
      width: calc(100% - 12px)
      transform: translateX(-4px)
  .#{$view360-prefix}-controls-button
    margin: 0
    padding: 0
    width: 24px
    height: 24px
    flex-shrink: 0
  &:disabled
    opacity: 0.5
    pointer-events: none
    *
      pointer-events: none

.#{$view360-prefix}-controls-pie
  width: 36px
  height: 36px
  margin: 6px
  padding: 0
  border-radius: 18px
  opacity: 0.8
  pointer-events: all
  cursor: pointer
  color: #fff
  position: relative
  transition: opacity 250ms
  > svg
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
  &:hover
    opacity: 1

.#{$view360-prefix}-range
  position: relative
  cursor: pointer
  pointer-events: all
  display: flex
  justify-content: center
  align-items: center
  touch-action: pan-y
  &:hover
    .#{$view360-prefix}-range-thumb
      opacity: 1

.#{$view360-prefix}-range-track
  width: 100%
  height: 4px
  border-radius: 4px
  position: relative
  background-color: rgba(230, 230, 230, 0.4)

.#{$view360-prefix}-range-filler,
.#{$view360-prefix}-range-load
  position: absolute
  left: 0
  top: 0
  width: 0
  height: 100%
  border-radius: 4px

.#{$view360-prefix}-range-filler
  background-color: #fff

.#{$view360-prefix}-range-load
  background-color: #757575

.#{$view360-prefix}-range-thumb
  width: 13px
  height: 13px
  position: absolute
  top: -5px
  left: -6.5px
  border-radius: 50%
  background-color: #fff
  box-sizing: border-box
  transition: opacity 250ms
  opacity: 0
  &.#{$view360-prefix}-controls-fixed
    opacity: 1

.#{$view360-prefix}-controls-unavailable
  display: none !important

@media screen and (max-width: 768px)
  .#{$view360-prefix}-controls-button
    background-size: 18px 18px
    width: 30px
    height: 30px
    margin: 4.5px
    padding: 6px
    border-radius: 15px

  .#{$view360-prefix}-controls-volume
    .#{$view360-prefix}-controls-button
      width: 18px
      height: 18px

  .#{$view360-prefix}-controls-volume
    &:not(:disabled)
      &:hover,
      &.#{$view360-prefix}-controls-fixed
        width: 84px

  .#{$view360-prefix}-controls-pie
    width: 27px
    height: 27px
    margin: 4.5px
    padding: 0
    border-radius: 13.5px
